<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>贴吧</title>
    <link href="/styles/base.css" rel="stylesheet" type="text/css">
    <link href="/styles/travelguide.css" rel="stylesheet" type="text/css">
    <link href="/js/plugins/jqPaginator/jqPagination.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script type="text/javascript" src="/js/plugins/jqPaginator/jq-paginator.min.js"></script>
    <script src="/js/plugins/js-cookie/js.cookie.min.js"></script>
    <script src="/js/vue/vue.min.js"></script>
    <script type="text/javascript" src="/js/vue/common.js"></script>
</head>
<body>
<h1 style="text-align: center">
    贴吧
</h1>
<h2 style="text-align: right">
    <a href="/views/login.html">登陆</a> | <a href="/views/messageBoard/rank.html">排行查看</a>
</h2>
<div class="item clearfix" id="app">
<div v-for="(m,index) in page.records">
    <div class="box box-widget">
        <div class="box-header with-border">
    <a :href="'/views/messageBoard/listDetail.html?id='+m.id" target="_blank" class="_j_item">
        <div class="detail">
            <h3>{{m.title}}</h3>
          <div class="extra">
                <span class="location"><i></i>{{m.authorName}}</span>
            </div>
        </div>
    </a>
     </div>
     </div>
</div>
<!--分页-->
<div style="float: right" >
    <div style="float: left;" ><span style="line-height:30px"> 共{{page.pages}}页 / {{page.total}}条&nbsp;&nbsp;&nbsp;</span></div>
    <div id="pagination" class="jq-pagination" style="display: inline;"></div>
</div>
<form id="edit_form" method="post" action="http://localhost:8080/messageBoard/saveOrUpDate">
    标题:<input id="title" name="title" size="15" style="width:500px;height:30px;"><br/>
    内容:<textarea id="content" name="content" style="width:500px;height:100px;"></textarea><br/>
    <input type="button" value="发表" @click="subForm">
</form>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            page:{}
        },
        methods:{
            doPage:function(page){
                $.get(domainUrl + "/messageBoard/query",{currentPage:page}, function (data) {
                    vue.page = data.data;
                   buildPage(vue.page.current, vue.page.pages,vue.doPage);
                })
            },
            subForm:function () {
                $('#edit_form').ajaxSubmit(function (data) {
                    if (data.success){
                        $('#title').val('');
                        $('#content').val('');
                        vue.doPage(1);
                    }
                })
            }
        },
        mounted:function () {

            //攻略分页列表
            this.doPage(1);
        }
    });
</script>
</body>
</html>
